<template>
  <div class="box">
    <div class="center">
      <div class="big" v-for="(item, index) in list" :key="index">
        <div class="small" @click="shanghui(index)">
          <!-- 小盒子区域 -->
          <div class="xiao">
            <!-- 上面区域 -->
            <div class="top">
              <img :src="item.img" alt="" />
            </div>
            <!-- 底部区域 -->
            <div class="bottom">
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          img: "",
          text: "商会入驻",
        },
        {
          img: "",
          text: "商会待遇",
        },
        {
          img: "",
          text: "会员待遇",
        },
        {
          img: "",
          text: "各省商会",
        },
      ],
    };
  },
  methods: {
    //商会跳转
    shanghui(i) {
      if (i == 0) {
        this.$router.push("/settle");
      } else if (i == 1) {
        this.$router.push("/treatmentwo/treatmenthree");
      } else if (i == 2) {
        this.$router.push("/member");
      } else if (i == 3) {
        this.$router.push("/chambertwo/chamberthree");
      }
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  position: sticky;
  top: 2.48rem;
  z-index: 110;
  left: 0;
  display: flex;
  justify-content: center;
  background-color: #30569f;
}
/* 版心区域 */
.center {
  width: 98%;
  height: 100%;
  display: flex;
}

.big {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.small {
  width: 80%;
  height: 100%;

  display: flex;
  justify-content: center;
}
/* 小盒子区域 */
.xiao {
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: 700;
  color: #272636;
}
/* 上面区域 */
.top {
  width: 100%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  width: 0.25rem;
  height: 0.25rem;
  padding-top: 0.06rem;
  padding-bottom: 0.04rem;
}
/* 底部区域 */
.bottom {
  width: 100%;
  height: 25%;
  color: white;
  font-weight: 700;
  font-size: 0.18rem;
  margin-bottom: 0.05rem;
}
</style>